<template>
  <div>
    <!-- 组件切换的动画 -->
    <router-view v-slot="{ Component }">
      <transition :name="animation">
        <component :is="Component" />
      </transition>
    </router-view>

    <div class="nav" ref="nav_bottom">
      <div class="nav_item">
        <span class="iconfont icon-shouye"></span>
        <br>
        <router-link to="/home" active-class="active">首页</router-link>
      </div>
      <div class="nav_item">
        <span class="iconfont icon-shangcheng"></span>
        <br>
        <router-link to="/shop" active-class="active">商城</router-link>
      </div>
      <div class="nav_item">
        <span class="iconfont icon-chengyuan"></span>
        <br>
        <router-link to="/member" active-class="active">会员</router-link>
      </div>
      <div class="nav_item">
        <span class="iconfont icon-icon03"></span>
        <br>
        <router-link to="/center" active-class="active">个人中心</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { useRoute } from "vue-router";
import { ref, watch} from "vue";
export default {
  name: "App",
  setup() {
    const route = useRoute();
    let animation = ref("slide");
    //旧的index
    let routeIndex = route.meta.index;
    watch(route, () => {
      animation.value =
        route.meta.index < routeIndex ? "slide-right" : "slide-left";
      routeIndex = route.meta.index;
    });



    return { animation };
  },
};
</script>

<style lang="less">
// 左滑动样式
.slide-left-enter-from {
  transform: translateX(100%);
}
.slide-left-enter-to,
.slide-left-leave-from,
.slide-left-leave-to {
  transform: translateX(0);
}
.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 300ms linear;
  position: fixed;
}

// 动画右滑动样式
.slide-right-enter-from {
  transform: translateX(-100%);
}
.slide-right-enter-to,
.slide-right-leave-from,
.slide-right-leave-to {
  transform: translateX(0);
}
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 300ms linear;
  position: fixed;
}

.nav {
  position: fixed;
  bottom: 0px;
  z-index: 999;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 60px;
  font-size: 16px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;

  .nav_item {
    width: 22%;
    height: 100%;
    // line-height: 60px;
    margin-top:5px;
    text-align: center;
    .iconfont{
      font-size: 26px;
    }

    .active {
      background-color: rgba(0, 0, 0, 0.1);
    }

    a {
      color: orangered;
      // display: inline-block;
      // width: 100%;
      // height: 100%;
    }
  }
}
</style>
